Jassif Team Institution

CSS Media Queries

CSS மீடியா வினவல்கள், ஒரு சாதனம் அல்லது வலைப்பக்கத்தைக் காண்பிக்கும் சூழலின் பண்புகளின் அடிப்படையில் பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன.

CSS மீடியா வினவல்கள் பதிலளிக்கும் வலைப்பக்கங்களை உருவாக்க அவசியமானவை.

CSS @media விதி உங்கள் பாணி தாளுக்கு மீடியா வினவல்களைச் சேர்க்கப் பயன்படுகிறது.

Use Mediaqueries to Add a Breakpoint

முந்தைய பக்கத்தில் நாங்கள் ஒரு கிரிட் அமைப்பு வலைப்பக்கத்தை உருவாக்கினோம். இப்போது பெரிய திரைகளில் கிரிட் உருப்படிகளை மறுசீரமைக்க மீடியா வினவல்களுடன் ஒரு பிரேக்பாயிண்ட் சேர்க்க விரும்புகிறோம்.

Example

இங்கே 600px இல் ஒரு பிரேக்பாயிண்ட் சேர்க்க ஒரு மீடியா வினவலைப் பயன்படுத்துகிறோம்:

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}

Another Breakpoint

நீங்கள் விரும்பும் அளவுக்கு பல பிரேக்பாயிண்ட்களைச் சேர்க்கலாம்.

Example

இங்கே திரை குறைந்தபட்சம் 600px மற்றும் திரை குறைந்தபட்சம் 768px ஆக இருக்கும் போது பிரேக்பாயிண்ட்களைச் சேர்க்க மீடியா வினவல்களைப் பயன்படுத்துகிறோம்:

@media (min-width: 600px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 3 / span 6;}
  .footer {grid-area: 4 / span 6;}
}

@media (min-width: 768px) {
  .header {grid-area: 1 / span 6;}
  .menu {grid-area: 2 / span 1;}
  .content {grid-area: 2 / span 4;}
  .facts {grid-area: 2 / span 1;}
  .footer {grid-area: 3 / span 6;}
}

Typical Device Breakpoints

வெவ்வேறு உயரங்கள் மற்றும் அகலங்கள் கொண்ட டன்கணக்கான திரைகள் மற்றும் சாதனங்கள் உள்ளன, எனவே ஒவ்வொரு சாதனத்திற்கும் சரியான பிரேக்பாயிண்ட் உருவாக்குவது கடினம். விஷயங்களை எளிமையாக வைத்திருக்க ஐந்து குழுக்களை இலக்கு வைக்கலாம்:

Example

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

Media Queries for Screen Orientation

திரையின் நோக்குநிலையைப் பொறுத்து ஒரு பக்கத்தின் அமைப்பை மாற்ற மீடியா வினவல்களும் பயன்படுத்தப்படலாம்.

இங்கே, திரை நோக்குநிலை landscape முறையில் இருந்தால், body இன் பின்னணி-நிறத்தை மாற்றுகிறோம்:

Example

@media only screen and (orientation: landscape) {
  body {
    background-color: lightblue;
  }
}

Hide Elements With Media Queries

இங்கே, சிறிய திரைகளில் ஒரு உறுப்பை மறைக்க மீடியா வினவல்களைப் பயன்படுத்துகிறோம்:

Example

/* Hide element if the viewport width is 600px or less */
@media screen and (max-width: 600px) {
  #div1 {
    display: none;
  }
}

Change Font Size With Media Queries

இங்கே, வெவ்வேறு viewport அகலங்களில் ஒரு உறுப்பின் எழுத்துரு அளவை மாற்ற மீடியா வினவல்களைப் பயன்படுத்துகிறோம்:

Example

/* If viewport width is 600px or more, set font-size to 80px */
@media screen and (min-width: 600px) {
  #div1 {
    font-size: 80px;
  }
}

Media Queries for User Preferences

சில பயனர்களுக்கு இயக்க உணர்வுகள் உள்ளன மற்றும் குறைந்த அனிமேஷன் கொண்ட வலைத்தளங்களை விரும்புகிறார்கள்.

prefers-reduced-motion மீடியா அம்சம் ஒரு பயனர் குறைக்கப்பட்ட இயக்கத்தைக் கேட்டுள்ளாரா என சரிபார்க்க உங்களை அனுமதிக்கிறது, அனிமேஷன்கள் அல்லது மாற்றங்கள் போன்றவை. அவர்களின் கணினியில் இந்த அமைப்பைச் செயல்படுத்திய பயனர்களுக்கான அனிமேஷன்கள் மற்றும் மாற்றங்களை அணைக்க இந்த அம்சத்தைப் பயன்படுத்தவும்:

Example

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Exercise

CSS @media Reference

அனைத்து மீடியா வகைகள் மற்றும் அம்சங்கள்/வெளிப்பாடுகளின் முழு கண்ணோட்டத்திற்கு, எங்கள் CSS குறிப்பில் @media விதியைப் பார்க்கவும்.